<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>全部内容-蘑菇网-你的专业导购</title>
    <meta name="Keywords" content="蘑菇网,女装,时尚潮流,网上购物"/>
    <meta name="Description" content="蘑菇网-成立于2016年底，横空而降的专业女装导购网站，您的信赖，是我们从事的唯一标准。"/>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
          name="viewport">
    <!-- Mobile Devices Support @begin -->
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <!-- Mobile Devices Support @end -->
    <link href="../css/index.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
    <script src="../script/jquery-1.9.1.min.js"></script>
    <script src="../script/main.js"></script>
    <script src="../script/jquery.rotate.min.js"></script>
    <script src="../script/api.js"></script>
    <script src="../script/settings.js"></script>
    <script src="../script/vue.js"></script>
    <script src="../script/axios.js"></script>
</head>

<body>
<div class="main" id="app">
    <!--头部-->
    <div class="header" id="bktop">
        <div class="logo"><a href=""><img :src="siteconfig.logo"/></a></div>
        <div class="banner">
            <div class="close"><img id="img1" src="../image/banner01.gif"/></div>
            <div class="open hide"><img id="img2" src="../image/banner02.gif"/></div>
            <ul class="xla">
                <li v-for="top in nav_list">
                    <a class="dianj dj1" href="javascript:;"><font>{{top.name}}</font><img id="ig1"
                                                                                           src="../image/xiala.gif"/></a>
                    <div class="zilan">
                        <a v-for="son in top.children_list" href="">{{son.name}}</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearBoth"></div>
    </div>  <!--资讯列表-->
    <div class="newsban">首页 > 潮流资讯 >{{current_category}}</div>
    <table class="newwclass">
        <tr class="juzhon" style="font-size: 13px;">
            <td><a :class="paginate.category==0?'on':''" @click="paginate.category=0;current_category='全部内容'">全部内容</a>
            </td>
            <td v-for="category in category_list"><a :class="paginate.category==category.id?'on':''"
                                                     @click="paginate.category=category.id;current_category='category.name'">{{category.name}}</a>
            </td>
        </tr>
    </table>
    <div class="news about">
        <!--资讯列表-->
        <div class="newslist">
            <div class="qtao" v-for="news in paginate.items">
                <div class="mg">
                    <div class="mgl"><img :src="news.image_url" width="100%"/></div>
                    <div class="mgr">
                        <h3>{{news.title}}</h3>
                        <div class="what">
                            <div class="time">
                                <div class="tub"><img src="../image/time.gif"/></div>
                                <div class="shij">{{news.create_time|dateFormat}}</div>
                                <div class="clearBoth"></div>
                            </div>
                            <div class="time hit">
                                <div class="tub"><img src="../image/hit.gif"/></div>
                                <div class="shij">{{news.read_count}}</div>
                                <div class="clearBoth"></div>
                            </div>
                            <div class="clearBoth"></div>
                        </div>
                        <div class="jianj">{{news.descript}}</div>
                        <div class="ydu">
                            <div class="anniu"><a href=""><img src="../image/ydu.gif"/></a></div>
                            <div class="clearBoth"></div>
                        </div>
                    </div>
                    <div class="clearBoth"></div>
                </div>
            </div>
        </div>
    </div>
    <!--分页-->
    <table class="page">
        <tr class="juzhon">
            <td v-if="paginate.has_prev &&paginate.page>1"><a @click="paginate.page=1"><img
                    src="../image/first.gif"/></a></td>
            <td v-if="paginate.has_prev &&paginate.page>1"><a @click="paginate.page-=1"><img
                    src="../image/pre.gif"/></a></td>
            <td v-if="paginate.has_prev &&paginate.page>1"><a @click="paginate.page-=1">{{paginate.page-1}}</a></td>
            <td><a class="on">{{paginate.page}}</a></td>
            <td v-if="paginate.has_next &&paginate.page<paginate.pages"><a
                    @click="paginate.page+=1">{{paginate.page+1}}</a></td>
            <td v-if="paginate.has_next &&paginate.page<paginate.pages"><a @click="paginate.page+=1"><img
                    src="../image/next.gif"/></a></td>
            <td v-if="paginate.has_next &&paginate.page<paginate.pages"><a @click="paginate.page=paginate.pages"><img
                    src="../image/last.gif"/></a></td>
        </tr>
    </table>
    <!--底部-->
    <div class="bottom">
        <div class="bottom-top">
            <div class="linker">
                <div class="liuy">
                    <a href="">
                        <div class="tubiao"><img src="../image/liuy.gif"/></div>
                        <div class="wenzi">在线留言</div>
                        <div class="clearBoth"></div>
                    </a>
                </div>
                <div class="clearBoth"></div>
            </div>
        </div>
        <div class="bottom-bot">{{siteconfig.copyright}}</div>
    </div>
</div>
</body>

<script type="text/javascript">
    vm = new Vue({
        el: "#app",
        data: {
            current_category: '全部内容',
            siteconfig: {},     // 站点配置
            category_list: [],  // 文章分类
            nav_list: [      // 导航菜单
                {children_list: []},
                {children_list: []},
                {children_list: []},
            ],
            paginate: {
                page: 1,
                category: 0,
                per_page: 4,
                items: [],  // 当前页面的数据项
            },   // 分页器
            myfilter: {}
        },
        watch: {
            'paginate.page': function () {
                this.get_list_news()
            },
            'paginate.category': function () {
                this.paginate.page = 1;
                this.get_list_news();
            }
        },
        created() {
            this.get_site_config();
            this.get_nav_list();
            this.get_news_category();
            this.get_list_news();
        },
        methods: {
            // 站点配置
            get_site_config() {
                axios.post(settings.API, {
                    "jsonrpc": "2.0",
                    "id": 188,
                    "method": "common.siteconfig",
                    "params": {}
                }).then(response => {
                    this.siteconfig = response.data.result;
                }).catch(error => {
                    alert(JSON.stringify(error.response));
                })
            },
            // 文章分类
            get_news_category() {
                axios.post(settings.API, {
                    "jsonrpc": "2.0",
                    "method": "news.news_category",
                    "params": {},
                    "id": 1
                }).then(response => {
                    this.category_list = response.data.result;
                }).catch(error => {
                    alert(JSON.stringify(error.response));
                })
            },
            // 获取导航菜单
            get_nav_list() {
                axios.post(settings.API, {
                    "jsonrpc": "2.0",
                    "method": "common.nav",
                    "params": {},
                    "id": 1
                }).then(response => {
                    this.nav_list = response.data.result;
                }).catch(error => {
                    alert(JSON.stringify(error.response));
                })
            },
            // 分页展示文章列表
            get_list_news() {
                this.myfilter = {
                    'per_page': this.paginate.per_page,
                };
                if (this.paginate.category > 0) {
                    this.myfilter.category = this.paginate.category;
                }
                if (this.paginate.page > 1) {
                    this.myfilter.page = this.paginate.page;
                }
                axios.post(settings.API, {
                    "jsonrpc": "2.0",
                    "method": "news.list_news",
                    "params": this.myfilter,
                    "id": 1
                }).then(response => {
                    this.paginate = response.data.result;
                }).catch(error => {
                    alert(JSON.stringify(error.response));
                })
            },
        },
        filters: {
            dateFormat(time) {
                return new Date(time).toLocaleDateString().replace("/", "-").replace("/", "-")
            }
        }
    })
</script>
</html>